<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
        .not {
            cursor: not-allowed;
        }
        .active{
            text-decoration: underline;
            color: #56a5f1;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 分页，要求：使用v-for指令循环生成按钮，要求点击页可以印切换页面，
            点击上一页下一页可以切换页面，在第一页时禁用上一页； 在末叶时禁用下一页；
            其他页面正常使用，而且按钮选中时有样式。 -->
        <!-- currentPage===page -->
        <div class="content">第{{currentPage}}页</div>
        <button :disabled="currentPage === 1" :class="{not: currentPage === 1}" @click="pre">《</button>
        <button v-for="page in num" :key="page" :class="{active: currentPage===page}" @click="change(page)">{{page}}</button>
        <button :disabled="currentPage === num" :class="{not: currentPage === num}" @click="next">》</button>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                num: 5, // 总页码数
                currentPage: 1 // 当前是第几页
            },
            methods: {
                change(page) {
                    this.currentPage = page;
                },
                pre() {
                    // 上一页
                    this.currentPage>1?this.currentPage -- : ''
                },
                next() {
                    // 下一页
                    this.currentPage<this.num?this.currentPage ++ : ''
                }
            }
        })
    </script>
</body>
</html>